<!doctype html>
<html>
<head>
<script type="text/javascript" src="vendor/jquery-1.6.3.min.js"></script>
</head>
<body>

<script type="text/javascript">
var ws;
var url;

$(document).ready(init);

function init() {
    $(document).keypress(function(event) {
        if ( event.which == 13 ) {
            event.preventDefault();
            send();
        }
    });
}

function connect() {
    url = $("#server_url").val();
    console.log(url);
    
    if ("WebSocket" in window) {
        ws = new WebSocket(url);
    } else if ("MozWebSocket" in window) {
        ws = new MozWebSocket(url);
    } else {
        chat_message("This Browser does not support WebSockets");
        return;
    }
    ws.onopen = function(e) {
        chat_message("A connection to "+url+" has been opened.");
        
        $("#server_url").attr("disabled",true);
        $("#toggle_connect").html("Disconnect");
    };
    
    ws.onerror = function(e) {
        chat_message("An error occured, see console log for more details.");
        console.log(e);
    };
    
    ws.onclose = function(e) {
        chat_message("The connection to "+url+" was closed.");
    };
    
    ws.onmessage = function(e) {
        var message = JSON.parse(e.data);
        
        if (message.type == "msg") {
            chat_message(message.value,message.sender);
        } else if (message.type == "participants") {
            var o = "<ul>";
            for (var p in message.value) {
                o += "<li>"+message.value[p]+"</li>";
            }
            o += "</ul>";
            $("#participants").html(o);
        }
    };
}

function chat_message(message,sender) {
    if (arguments.length == 1) {
        sender = "";
    }
    
    var style;
    
    if (sender == "") {
        style = "client";
    } else if (sender == "server") {
        style = "server";
        sender = "["+sender+"]";
    } else {
        style = "message";
        sender = "["+sender+"]";
    }
    
    $("#messages").append("<span class='"+style+"'><span class='sender'>"+sender+"</span> <span class='msg'>"+message+"</span></span><br />");
    $("#messages").prop({ scrollTop: $("#messages").prop("scrollHeight")  });
}

function disconnect() {
    ws.close();
    $("#server_url").removeAttr("disabled");
    $("#toggle_connect").html("Connect");
    $("#participants").html("");
}

function toggle_connect() {
    if ($("#server_url").attr("disabled") != "disabled") {
        connect();
    } else {
        disconnect();
    }
}

function send() {
    if (ws === undefined || ws.readyState != 1) {
        chat_message("Websocket is not avaliable for writing");
        return;
    }
    
    ws.send($("#msg").val());
    $("#msg").val("");
}




</script>

<style>
body,html {
    margin: 0px;
    padding: 0px;
    height: 100%;
    background-color: #999;
    font-family: sans-serif;
    font-size: 14px;
}

h3 {

}

#controls {
    padding: 4px;
    float:right;
    width: 300px;
    
}

input {
    width: 200px;
}

#messages {
    height: 100%;
    overflow: auto;
    background-color: black;
}

#messages .client {
    color: #ccc;
}

#messages .server {
    color: yellow;
}

#messages .message {
    color: white;
}

</style>

<div id="controls">
    <div id="server">
    <input type="text" name="server_url" id="server_url" value="ws://thor-websocket.zaphoyd.net:9000/chat" />
    <button id="toggle_connect" onclick="toggle_connect();">Connect</button>
    </div>

    <div id="message_input"><input type="text" name="msg" id="msg" value="Hello World!" />
    <button onclick="send();">Send</button></div>
    <h3>Chat Participants</h3>
    <div id="participants"></div>
</div>
<div id="messages"></div>

</body>
</html>